<template>
  <div class="hint" v-show="tips.show">
    <h3>{{ tips.content }}</h3>
  </div>
</template>
<script>
export default {
  name: 'tips',
  data (){
    return {
      // 根据情况扩充tips即可
      tips:{
        show: false,
        content: ''
      }
    }
  },
  created () {
    this.common.$on('tips',(data)=>{
      this.tips = data;
    })
  },
  watch:{
    // 检测tips变化，显示提示1.5s之后自动关闭，可根据实际情况自动修改时间
    tips:function(){
      if(this.tips.show){
        setTimeout(() => {
          this.tips.show = false;
        },2000)
      }
    }
  }
}
</script>
<style scoped>
.hint {
  z-index: 999999;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}
.hint h3 {
  padding: 12px 15px;
  font-size: 12px;
  line-height: 12px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 4px;
}
</style>